<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas初学</title>
</head>
<body>
    <!-- id、width、height必备三要素 -->
    <canvas id="c1" width="600" height="400">
        <a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a>
    </canvas>

    <script>
        // 找到画布
        var c1 = document.getElementById('c1');
        // 判断是否有getContext
        // 获取画笔，上下文对象
        if(!c1.getContext){
            console.log("当前浏览器不支持canvas，请下载最新的浏览器");
        }
        var ctx = c1.getContext('2d');
        // 绘制图形
            // 绘制矩形fillRect(位置x,位置y,宽度,高度)
            // ctx.fillRect(100,200,300,300);
            // 路径绘制矩形strokeRect(x1,y1,矩形宽度,矩形高度)
            ctx.strokeRect(100,100,200,100)
            ctx.fillRect(200,150,200,100);
            // ctx.clearRect(0,0,c1.clientWidth,c1.clientHeight)
            // 清除图形
            let height = 0;
            let t1 = setInterval(() => {
                height++;
                ctx.clearRect(0,0,c1.clientWidth,height);
                if(height > c1.clientHeight){
                    clearInterval(t1);
                }
            },10);
    </script>
</body>
</html>